<template>
  <div class="user-activity">
    <div class="tab-contain">
      <div v-for="(item, index) in tabList" :key="index">
        <div
          :class="tabIndex == index ? 'tab-item-active' : 'tab-item'"
          @click="tabClick(index)"
        >
          <svg-icon icon-class="dot"></svg-icon> {{ item.name }}
        </div>
      </div>
      <div></div>
    </div>
    <div class="tab-content">
      <div v-if="tabIndex == 0"><AccountUser/></div>
      <div v-if="tabIndex == 1"><UpdatePwd /></div>
    </div>
  </div>
</template>

<script>
import AccountUser from "./Account.vue";
import UpdatePwd from "./UpdatePwd.vue";
export default {
  data() {
    return {
      tabList: [{ name: "基本资料" }, { name: "修改密码" }],
      tabIndex: 0,
    };
  },
  components: {
    AccountUser,
    UpdatePwd,
  },
  methods: {
    tabClick(index) {
      this.tabIndex = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.user-activity {
  width: 100%;
  height: 100%;
  padding: 20px 40px 20px 140px;
  box-sizing: border-box;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.06),
    0 8px 16px rgba(0, 0, 0, 0.04);
}
.tab-contain {
  position: absolute;
  left: 0px;
  top: 30px;
  z-index: 999;
  .tab-item-active,
  .tab-item {
    width: 140px;
    margin-bottom: 10px;
    padding: 10px 20px;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
  }
  .tab-item-active {
    background-color: #0b6eff;
    transform: translateX(-10px);
    transition: all 0.3s ease-in-out;
  }
  .tab-item {
    color: #3b3d3f;
    transform: translateX(10px);
    transition: all 0.3s ease-in-out;
  }
}
.tab-content {
  width: auto;
  height: 100%;
  padding: 40px;
  background-color: #f1f1f1;
  border-radius: 20px;
  // border: 1px solid #e1e5e8;
}
</style>
